// 入口文件
import Vue from 'vue'
// 1.1 导入路由的包
import VueRouter from 'vue-router'
// 1.2 把路由绑定到vue中
Vue.use(VueRouter)


// 每当刚进入网站肯定会调用 main.js，在刚调用的时候先从本地存储中把存储的购物车数据读出来放到 store 的 car 中
var car = JSON.parse(localStorage.getItem('car') || '[]') 

// 注册vuex
import Vuex from 'vuex'
Vue.use(Vuex)
var store = new Vuex.Store({
	state: { // this.$store.state.***
		/*将购物车中的商品数据，用一个数组存储起来，在car数组中
		，存储一些商品的对象，咱们可以暂时将这个商品对象设计成这个样子
		{id:商品的id, count:要购买的数量, price:商品的单价, selected:false}*/
		car: car 
	},
	mutations: { // this.$store.commit('方法的名称', '按需传递唯一的参数')
		addTocar(state, goodsinfo) {
			// 点击加入购物车把商品信息保存到 store 中的 car 里面
			// 分析：
			// 1.如果购物车中之前就已经有这个对应的商品了，那么只需更新商品数量就行
			// 2.如果购物车中没有这件对应的商品，则直接把商品数据push到car中即可
			
			// 假设 在购物车中没有找到对应的商品，用 flag 属性来标识
			var flag = false

			// 如果购物车中之前就已经有这个对应的商品了，只需更新商品数量
			// 这里是用 some 循环，找到对应条件后返回，不会循环整个数组
			state.car.some(item => {
				if(item.id == goodsinfo.id) {
					item.count += parseInt(goodsinfo.count)
					// 如果购物车中有这对应的商品，直接把 flag 表示符改为true
					flag = true	
					return true
				}
			})

			// 如果 some 循环完毕，得到的 flag 还是 false，表示购物车没有对应这件商品数据，则直接把商品数据 push 到 购物车中
			if(!flag) {
				state.car.push(goodsinfo)
			}


			// 当更新 car 之后，把 car 数组信息，存储到本地的 localStorage 中
			localStorage.setItem('car', JSON.stringify(state.car))
		},
		updateGoodsInfo(state, goodsinfo) {
			// 修改购物车中的商品数量值
			state.car.some(item => {
				if(item.id == goodsinfo.id) {
					item.count = parseInt(goodsinfo.count)
					return true
				}
			})
			// 当修改完商品的数量后，把最新的购物车数据保存到本地存储中
			localStorage.setItem('car', JSON.stringify(state.car))
		},
		removeFormCar(state, id) {
			// 根据传递过来的Id 从store中的购物车删除对应商品数据
			state.car.some((item, i) => {
				if(item.id == id) {
					state.car.splice(i, 1)
					return true;
				}
			})
			// 将删除完毕后的最新购物车数据，同步到 本地存储中
			localStorage.setItem('car', JSON.stringify(state.car))
		},
		updateGoodsSelected(state, info) {
			state.car.some(item => {
				if(item.id == info.id) {
					item.selected = info.selected
				}
			})
			// 把最新的所有购物车商品状态保存到 本地存储中
			localStorage.setItem('car', JSON.stringify(state.car))
		}
	},
	getters: { // this.$store.getters.***
		// 相当于 计算属性，当调用的属性发送变化时会自动触发定义的方法，也相当于 filters 过滤器
		getAllCount(state) {
			var c = 0;
			state.car.forEach(item => {
				c += item.count
			})
			return c
		},
		getGoodsCount(state) {
			var o = {}
			state.car.forEach(item => {
				o[item.id] = item.count
			})
			return o
		},
		getGoodsSelected(state) {
			// 获取每件商品的选中信息
			var o = {}
			state.car.forEach(item => {
				o[item.id] = item.selected
			})
			return o 
		},
		getGoodsCountAndAmount(state) {
			var o = {
				count: 0, // 勾选的商品数量
				amount: 0 // 勾选的所有商品总价
			}
			state.car.forEach(item => {
				if(item.selected) {
					o.count += item.count
					o.amount += item.price * item.count
				}
			})
			return o
		}
	}
})


// 导入格式时间的插件
import moment from 'moment'
// 定义全局的过滤器  把日期时间进行下面格式化显示
Vue.filter('dateFormat', function(dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {
	return moment(dataStr).format(pattern)
})


// 2.1 导入 vue-resource
import VueResource from 'vue-resource'
// 2.2 安装 vue-resource 到 Vue 中
Vue.use(VueResource)
// 设置请求的根路径
Vue.http.options.root = 'http://www.liulongbin.top:3005'
// 全局设置 post 请求时候表单数据格式 application/x-www-form-urlencoded 这样没错post请求时就不能写格式的组织形式了
Vue.http.options.emulateJSON = true;


// 导入 并给 vue 绑定图片预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)


// 导入 App 根组件
import app from './App.vue'

// 1.3 导入自己的 router.js 路由模块
import router from './router.js'


// 按需导入 Mint-ui 中的组件
/*import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'
Vue.component(Header.name, Header)m
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
Vue.component(Button.name, Button)
Vue.use(Lazyload);*/
// 按需导入有的组件会有问题，我们直接全部导入 mint-ui
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'



// 导入 MUI 的样式
import './lib/mui/css/mui.min.css'
// 导入 MUI 中扩展图标样式
import './lib/mui/css/icons-extra.css'



var vm = new Vue({
	el: '#app',
	render: c => c(app),
	router, // 1.4 挂载路由对象到 vm 实例上
	store // 挂载 store 状态管理对象
})